import 'package:ecy_app_flutter/EcyRouter.dart';
import 'package:ecy_app_flutter/ecycommon/utils/EcyRandomUtil.dart';
import 'package:flutter/material.dart';

class EcyExchangeSelectTargetPage extends StatefulWidget {
  @override
  State<EcyExchangeSelectTargetPage> createState() => _EcyExchangeSelectTargetPageState();
}

class _EcyExchangeSelectTargetPageState extends State<EcyExchangeSelectTargetPage> {
  // 示例数据
  final List<Map<String, String>> items = [
    {'name': '虎杖悠仁', 'img': EcyRandomUtil.randomIconUrl()},
    {'name': '五条悟', 'img': EcyRandomUtil.randomIconUrl()},
    {'name': '伏黑惠', 'img': EcyRandomUtil.randomIconUrl()},
    {'name': '钉崎野薔薇', 'img': EcyRandomUtil.randomIconUrl()},
  ];
  int? selectedIdx;

  void _showExchangeRuleDialog() {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => Dialog(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        child: Container(
          width: 300,
          padding: EdgeInsets.only(top: 24, left: 20, right: 20, bottom: 0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('商品交换上架', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
              SizedBox(height: 16),
              Align(
                alignment: Alignment.centerLeft,
                child: Text('交换说明：', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600)),
              ),
              SizedBox(height: 8),
              Text(
                '1. 集市交换安全期为XX，即商品剩余存有期小于XX小时，无法进行交换。\n2. 已上架到集市的商品，超出安全期未被交换，将自动下架，可下单发货，不可再次上架交换。\n……',
                style: TextStyle(fontSize: 14, color: Colors.black87),
              ),
              SizedBox(height: 24),
              Divider(height: 1, thickness: 1),
              SizedBox(
                height: 48,
                child: Row(
                  children: [
                    Expanded(
                      child: TextButton(
                        style: TextButton.styleFrom(
                          padding: EdgeInsets.zero,
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(bottomLeft: Radius.circular(16))),
                        ),
                        onPressed: () => Navigator.of(context).pop(),
                        child: Text('取消', style: TextStyle(color: Colors.pinkAccent, fontSize: 16)),
                      ),
                    ),
                    Container(width: 1, height: double.infinity, color: Color(0xFFF0F0F0)),
                    Expanded(
                      child: TextButton(
                        style: TextButton.styleFrom(
                          padding: EdgeInsets.zero,
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(bottomRight: Radius.circular(16))),
                        ),
                        onPressed: () {
                          // Navigator.of(context).pop();
                          EcyRouter.push(context, EcyRouter.blindBoxSuccessPage, {});
                         
                        },
                        child: Text('确定', style: TextStyle(color: Color(0xFFFF7BBE), fontSize: 16, fontWeight: FontWeight.w600)),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('选择想换入的谷子', style: TextStyle(color: Colors.black)),
        backgroundColor: Colors.white,
        elevation: 0,
        iconTheme: IconThemeData(color: Colors.black),
      ),
      backgroundColor: Color(0xFFF5F5F5),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: GridView.builder(
          itemCount: items.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 16,
            crossAxisSpacing: 16,
            childAspectRatio: 0.75,
          ),
          itemBuilder: (context, idx) {
            final item = items[idx];
            final isSelected = selectedIdx == idx;
            return GestureDetector(
              onTap: () {
                setState(() {
                  selectedIdx = idx;
                });
              },
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12),
                  border: isSelected ? Border.all(color: Color(0xFFFF7BBE), width: 2) : null,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(8),
                      child: Image.network(
                        item['img'] ?? '',
                        width: 100,
                        height: 100,
                        fit: BoxFit.cover,
                      ),
                    ),
                    SizedBox(height: 12),
                    Text(item['name'] ?? '', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w500)),
                  ],
                ),
              ),
            );
          },
        ),
      ),
      bottomNavigationBar: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
          child: SizedBox(
            width: double.infinity,
            height: 44,
            child: ElevatedButton(
              onPressed: selectedIdx == null ? null : _showExchangeRuleDialog,
              style: ElevatedButton.styleFrom(
                elevation: 0,
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(22)),
                padding: EdgeInsets.zero,
                backgroundColor: Color(0xFFFF7BBE),
                disabledBackgroundColor: Colors.grey[300],
              ),
              child: Text('我选好了', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Colors.white)),
            ),
          ),
        ),
      ),
    );
  }
} 